<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow">
    <link href="/css/login.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"/>
    <title>admin login</title>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>

<body>
<div class="login-content" style="background-image: url(/img/background.svg);">
    <div class="box">
        <div>
            <img style="width: 20%" class="logo" src="/css-logo.png" alt="Alfresco">
        </div>
        <div class="box-container">
            <div>
                <p class="application-name" style="margin-left: 97px">管理员登录页面</p>
            </div>
            <div>
                <form id="kc-form-login" class="form" action="/admin/login" method="post">
                    <label for="username"></label><input id="username" class="login-field" placeholder="用户名" type="text"
                                                         name="username" tabindex="1">
                    <div>
                        <label class="visibility" id="v"><img id="vi" src="/img/eye-off.png" alt="eye"></label>
                    </div>
                    <label for="password"></label><input id="password" class="login-field" placeholder="密码"
                                                         type="password" name="password" tabindex="2">
                    <div><a href="/user/login"  >普通用户</a></div>

                    <input  class="submit" type="submit" value="登录" tabindex="3" style="display: none" id="inputButton" >
                    <button class="submit" id="TencentCaptcha" data-appid="2018840469" data-cbfn="callbackName" data-biz-state="data-biz-state"
                            type="button"> 登录</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById("v").addEventListener("click", () => {
        const x = document.getElementById("password");
        const v = document.getElementById("vi");
        if (x.type === "password") {
            x.type = "text";
            v.src = "/img/eye.png";
        } else {
            x.type = "password";
            v.src = "/img/eye-off.png";
        }
    });

    // 回调函数需要放在全局对象window下
    window.callbackName = function (res) {
        // 返回结果
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，请求后台接口时需带上。
        console.log('callback:', res);

        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        if (res.ret === 0) {
            document.getElementById('inputButton').click()
        }
    }

</script>
</body>
</html>
